<template>
  <div class="page">
    <el-tabs ref="vehicleManage" v-model="activeName" class="ledger-content" type="card">
      <el-tab-pane v-if="$hasTabPermission(50201)" label="车辆管理" name="tab-info">
        <tab-info />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50202)" label="大车司机" name="cartDriver">
        <cartDriver />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50203)" label="大车司机用户" name="cartDriverUser">
        <cartDriverUser />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import TabInfo from './TabInfo'
  import cartDriver from '../cartDriver'
  import cartDriverUser from '../cartDriverUser'
  export default {
    name: 'vehicleManage',
    components: {
      TabInfo,
      cartDriver,
      cartDriverUser
    },
    data() {
      return {
        activeName: 'tab-info'
      }
    },
    mounted() {
      this.activeName = this.$refs.vehicleManage.panes.length > 0 ? this.$refs.vehicleManage.panes[0].name : ''
    }
  }
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  .ledger-content {
    height: calc(100% - 10px);
    /deep/ .el-tabs__content {
      height: calc(100% - 50px);
    }
    /deep/ .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
